<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="ntModalLabel">{:strtoupper(lang('add/change_container'))}</h4>
</div>
<form class="modal-body" id="formbox">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#base" data-toggle="tab">{:strtoupper(lang('basic_information'))}</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" id="add_base" >
            <table class="table table-hover ntTable">
                <tbody>
                <tr>
                    <td>{:strtoupper(lang('name'))}<span class="required"></span></td>
                    <td colspan="3"><input type="text" class="form-control" name="name" value="{$data.name|default=''}"></td>

                </tr>
                <tr>
                    <td>{:strtoupper(lang('preparation_date'))}<span class="required"></span></td>
                    <td>
                        <div class="input-group date form_datetime" data-date="2019-10-12" data-date-format="yyyy-mm-dd" data-link-field="add_ready_day">
                            <input class="form-control" type="text" name="ready_day" value="{$data.dateday}">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar" style="margin:0"></span></span>
                        </div>
                        <input type="hidden" id="add_ready_day" value="" />
                    </td>
                    <td>{:strtoupper(lang('voyage'))}</td>
                    <td>{:strtoupper(lang('CHINA'))} >> {:strtoupper(lang('BRASIL'))}</td>
                </tr>
                <tr>
                    <td>{:strtoupper(lang('container_type'))}</td>
                    <td>
                        <select class="form-control" name="type_id">
                            <option value="">{:lang('please_select')}</option>
                            {volist name="data.container_type" id="vo"}
                            <option value="{$vo.id}">{$vo.name}</option>
                            {/volist}
                        </select>
                    </td>
                    <td>{:strtoupper(lang('container_quantity'))}<span class="required"></span></td>
                    <td><input type="number" min="1" class="form-control text-right" name="number" value="1"></td>
                </tr>
                <tr>
                    <td>{:strtoupper(lang('place_of_departure'))}</td>
                    <td>
                        <select class="form-control" name="port_start">
                            <option value="">{:lang('please_select')}</option>
                            {volist name="data.port_start" id="vo"}
                            <option value="{$vo.id}">{$vo.name}</option>
                            {/volist}
                        </select>
                    </td>
                    <td>{:strtoupper(lang('goods_loan'))}</td>
                    <td>
                        <select class="form-control" name="co_id_start">
                            <option value="">{:lang('please_select')}</option>
                            {volist name="data.co_id_start" id="vo"}
                            <option value="{$vo.id}">{$vo.name}</option>
                            {/volist}
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>{:strtoupper(lang('destination'))}</td>
                    <td>
                        <select class="form-control" name="port_arrival">
                            <option value="">{:lang('please_select')}</option>
                            {volist name="data.port_arrival" id="vo"}
                            <option value="{$vo.id}">{$vo.name}</option>
                            {/volist}
                        </select>
                    </td>
                    <td>{:strtoupper(lang('goods_loan'))}</td>
                    <td>
                        <select class="form-control" name="co_id_arrival">
                            <option value="">{:lang('please_select')}</option>
                            {volist name="data.co_id_arrival" id="vo"}
                            <option value="{$vo.id}">{$vo.name}</option>
                            {/volist}
                        </select>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</form>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:strtoupper(lang('cancel'))}</button>
    <button type="button" class="btn btn-primary" id="qudins" style="padding-left:24px;padding-right:24px"><span class="glyphicon glyphicon-floppy-disk"></span>{:strtoupper(lang('save'))}</button>
</div>
<script language="javascript">
    $(document).ready(function () {
        var lang = $('#lang').text();
        var language = '';
        if (lang == 'pt') {
            language = 'pt-BR';
        } else if (lang == 'en') {
            language = 'en';
        } else {
            language = 'zh-CN';
        }
        //设置modal垂直居中,移动
        $('.form_datetime').datetimepicker({
            language: language, // en ,zh-CN, pt-BR
            format: 'yyyy-mm-dd',
            minView: 'month',
            weekStart: 0, //一周从哪一天开始
            todayBtn: 1, //底部会出现一个今天
            autoclose: true,//自动关闭
            todayHighlight: 1,//高亮今天日期
            startView: 2,//显示的视图
            forceParse: 1,//当选择器关闭的时候，是否强制解析输入框中的值
            showMeridian: 1
        });
    });
//处理数据的写入
    $('#qudins').click(function () {
        subfn()
    })
    function subfn() {
            $('#qudins').attr('disabled',true);
            $.ajax({
                url: '/Admin/logistics/containeradd',
                type: 'post',
                data: $("#formbox").serialize(),
                dataType: 'json',
                success: function (res) {
                    if (res.status != 1) {
                        change_mes_type('.modal-body .alert',res.status)
                        $('.modal-body .alert').show()
                        $('.modal-body .alert p').html('*'+res.msg+'<br>')
                    } else {
                        change_mes_type('#headeralert',res.status)
                            $('#headeralert').show()
                            $('#headeralert p').html('*'+res.msg+'<br>')
                            $('#container_addModal').modal('hide')
                    }
                    $('#qudins').attr('disabled',false);
                }
            });
    }
    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            $('form').each(function () {
                event.preventDefault();
            });
            subfn()
        }
    });
</script>